<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testorder</title>
    <link rel="stylesheet" href="css/fore/order.css">
    <link rel="stylesheet" href="css/fore/index.css">
    <link rel="stylesheet" href="css/fore/testorder.css">
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/fetch.min.js"></script>
    <script src="js/axios.min.js"></script>

</head>
<body>
<div class="header">
    <div class="top">
        <div class="top-logo fl">
            <a id="logo" href="index.html"><img src="img/car-logo.png" alt="" class="fl"
                                                style="margin-top: 20px;width: 45px"><span
                    class="top-logo-text">练车预约系统</span></a>
        </div>
    </div>
    <div class="header-nav">
        <ul id="nav-list">
            <li class="nav-list-li"><a href="index.html">首页</a></li>
            <li class="nav-list-li"><a href="selectcoach.html">明星教练</a></li>
            <li class="nav-list-li"><a href="testorder.html">考试报名</a></li>
            <li class="nav-list-li"><a href="order.html">练车预约</a></li>
            <li class="nav-list-li"><a href="teachingvideo.html">驾考视频</a></li>
            <li class="nav-list-li"><a href="register.html">驾校报名</a></li>
        </ul>
    </div>
</div>

<div id="allContent" class="headlineC">
    <div id = "hhh" class="content-testorder" v-for="e in es">
        <div class="content-testorder-div">
            <p style="color: red">考试信息</p>
            <p>时间：{{e.date_}}</p>
            <p>地点：{{e.place}}</p>
            <p>考试类型：{{e.type_}}</p>
        </div>
        <div class="content-testorder-main">
            <img src="img/coach/right.png" alt="" class="content-testorder-img move">
        </div>
        <p class="content-testorder-pr"><a class="content-testorder-a" @click="reservation(e.id)">报名</a></p>
    </div>
</div>
<div class="footer">
    <p>
        Good CarTeacher©2018 | QQ:123456789
        <a href="#">|关于我们</a>
        <a href="login.html">|驾校登录</a>
    </p>
</div>
<script>

    $(() => {
        $("img.move:visible").animate({
            right: "360px"
        }, 2000);
        // $("img#move:hidden").show(2000);
    });

</script>
<script>

    let url = "fore_student_listExam";
    new Vue({
        el: '#allContent',
        data: {
            es: []
        },
        mounted: function () {
            self = this;
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    if (jsonObject.flag === 2) {
                        window.location.replace("testorderSuccess.html");
                    }
                    else {
                        self.es = jsonObject.es;
                    }
                    $("#hhh").animate({left: "+=520px"}, 3000);
                }).catch(function (err) {
                    console.log("Fetch错误：" + err);
                })
            });
        },
        methods: {
            reservation: function (id) {
                url = "fore_student_examSinUp" + "?id=" + id;
                axios.get(url).then(function (response) {
                    let flag = response.data.flag;
                    let info = response.data.info;
                    if (flag === 1) {
                        alert("您当前处在" + info + "阶段只能报名" + info + "的考试");
                    }
                    else {
                        window.location.replace("testorderSuccess.html");
                    }
                })

            }
        }
    });
</script>
</body>
</html>